import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';

import {
  Navbar,
  HText,
  Divider,
  SegmentedControl,
} from '../../DodLibrary/index';

class SegmentedControlPage extends Component {

  _onChange = (data) => {
    console.log(data);
  };

  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View
        style={styles.container}>
        <Navbar
          title="SegmentedControl"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>
          <Divider />
          <HText.H20>
            Use with navbar
          </HText.H20>
          <Divider />
          <Navbar
            title={
              <View
                style={{
                  width: 250,
                }}>
                <SegmentedControl
                  onChange={this._onChange}
                  selectedBackgroundColor="#e91e63"
                  unSelectedTextColor="#e91e63"
                  names={['first', 'second', 'third']}
                  callbacks={[
                    () => { },
                    () => { },
                    () => { },
                  ]}
                />
              </View>
            }
            titlePos="center"
            leftIcon={{
              name: 'apps',
            }}
            leftOnPress={() => navigation.navigate('DrawerOpen')}
          />

          <Divider />
          <HText.H20>
            multi select
          </HText.H20>
          <Divider />
          <Navbar
            title={
              <View
                style={{
                  width: 250,
                }}>
                <SegmentedControl
                  multiple
                  onChange={this._onChange}
                  selectedBackgroundColor="#e91e63"
                  unSelectedTextColor="#e91e63"
                  names={['first', 'second', 'third']}
                  callbacks={[
                    () => { },
                    () => { },
                    () => { },
                  ]}
                />
              </View>
            }
            titlePos="center"
            leftIcon={{
              name: 'apps',
            }}
            leftOnPress={() => navigation.navigate('DrawerOpen')}
          />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default SegmentedControlPage;
